<?php
$this->title = '修改地址';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>编辑收货地址</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <script src="/static/script/zepto.min.js"></script>
    <script src="/static/script/transform.region.js"></script>
    <script src="/static/script/region.func.js"></script>
    <script src="/static/script/region.data.js"></script>
</head>
<body class="m-act-adrs">

<dl class="fm f-cb"><dt>收货人</dt><dd><input type="text" id="J_name" placeholder="名字" value="<?= $data['name']?>"/></dd></dl>
<dl class="fm f-cb"><dt>手机号码</dt><dd><input type="text" id="J_mobile" placeholder="联系方式" value="<?= $data['mobile']?>"/></dd></dl>

<input type="hidden" id="J_valCity" value="<?= $data['district']?>" />
<dl class="fm f-cb"><dt>收货地址</dt><dd class="arrow" id="J_forCity" data-val=""><?= $data['merger']?></dd></dl>
<dl class="fm f-cb"><dt>详细地址</dt><dd><input type="text" id="J_detail" value="<?= $data['address']?>"/></dd></dl>

<a class="<?= $data['default'] == 1 ?  'chk z-on': 'chk'?>" id="J_setDft" href="javascript:;">设为默认地址</a>

<a class="btn" href="javascript:submit();"><span>确定</span></a>
<a class="btn" href="javascript:remove();"><span>删除</span></a>

<div class="mask" id="J_mask"></div>

<div class="m-region" id="J_sltCity">
    <h6 class="f-cb"><span>选择省/市/区</span><a href="javascript:void(0);" id="j-sure-region">完成</a></h6>
    <h5><span>省</span><span>市</span><span>区</span></h5>
    <h4></h4>
    <div><ul class="j-prov"></ul></div>
    <div><ul class="j-city"></ul></div>
    <div><ul class="j-area"></ul></div>
</div>

<script>

    /* ----------------------------- */

    // 预定义变量
    var eleFst, eleScd, eleThd;
    var jFst = '.j-prov', jScd = '.j-city', jThd = '.j-area';
    var cfg = [40, 2]; // 此处修改需要修改对应的CSS值
    var init = {0:['31', '上海市'], 1:['3101', '上海市'], 2:['310101', '黄浦区']};

    // 匿名选择器
    var GC = function(c){ return document.querySelector(c); };
    var GI = function(i){ return document.getElementById(i); };

    // 选择地区弹窗开启 & 确定地区关闭弹窗
    GI('J_forCity').addEventListener('touchend', showRegion, false);
    GI('j-sure-region').addEventListener('touchend', closeRegion, false);

    // [函数] 选择地区弹窗开启
    function showRegion(){

        // 省级 & 市级 & 县级HTML
        GC(jFst).innerHTML = obRegion.createOptions(cfg[1], obRegion.prov);
        GC(jScd).innerHTML = obRegion.createOptions(cfg[1], obRegion.retSubDataById(init[0][0]));
        GC(jThd).innerHTML = obRegion.createOptions(cfg[1], obRegion.retSubDataById(init[1][0]));

        // 开启 遮罩 & 选择的弹窗
        GI('J_sltCity').style.cssText = obRegion.kernel() + 'transition:all .15s linear;'+ obRegion.kernel() +'transform:translateY(-290px);';
        GI('J_mask').style.display = 'block';

        // 省级 滑动
        eleFst = new zTransform(jFst, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[0][0]),
            complete : function (i){

                // 级联 市级
                var el = document.querySelector(jFst + ' > li:nth-child('+ (i + 1) +')');
                var pid = el.getAttribute('data-id'), ptxt = el.textContent;
                var psub = obRegion.retSubDataById(pid);
                GC(jScd).innerHTML = obRegion.createOptions(cfg[1], psub);
                eleScd.reFresh();

                // 级联 县级[存在则显示，反之隐藏]
                var carr = obRegion.retFirst(psub);
                var cid = carr[0], ctxt = carr[1];
                var csub = obRegion.retSubDataById(cid);
                var sel = document.querySelector(jThd);
                if(csub){
                    sel.innerHTML = obRegion.createOptions(cfg[1], csub);
                    sel.style.display = 'block';
                    eleThd.reFresh();
                    var aarr = obRegion.retFirst(csub);
                    var aid = aarr[0], atxt = aarr[1];
                }else{
                    sel.style.display = 'none';
                    var aid = '', atxt = '';
                }

                init = {0:[pid, ptxt], 1:[cid, ctxt], 2:[aid, atxt]};
            }
        });

        // 市级 滑动
        eleScd = new zTransform(jScd, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[1][0]),
            complete : function(i){

                // 级联 县级[存在则显示，反之隐藏]
                var el = document.querySelector(jScd + ' > li:nth-child('+ (i + 1) +')');
                var cid = el.getAttribute('data-id');
                init[1] = [cid, el.textContent];
                var csub = obRegion.retSubDataById(cid);
                var sel = document.querySelector(jThd);
                if(csub){
                    sel.innerHTML = obRegion.createOptions(cfg[1], csub);
                    sel.style.display = 'block';
                    eleThd.reFresh();
                    var aarr = obRegion.retFirst(csub);
                    init[2] = [aarr[0], aarr[1]];
                }else{
                    sel.style.display = 'none';
                    init[2] = ['', ''];
                }
            }
        });

        // 县级 滑动
        eleThd = new zTransform(jThd, { spacing : cfg[0], step : cfg[1], then : obRegion.retIndex(init[2][0]),
            complete : function(i){
                var el = document.querySelector(jThd + ' > li:nth-child('+ (i + 1) +')');
                init[2] = [el.getAttribute('data-id'), el.textContent];
            }
        });
    }

    // [函数] 确定地区关闭弹窗
    function closeRegion(event){

        // 关闭 遮罩 & 选择的弹窗
        GI('J_sltCity').style.cssText = obRegion.kernel() + 'transition:all .15s linear;'+ obRegion.kernel() +'transform:translateY(0px);';
        GI('J_mask').style.display = 'none';

        // 注: 解锁DOM滚动条
        eleFst.removeDocLit();
        eleScd.removeDocLit();
        eleThd.removeDocLit();

        // 组合值
        var _txt = [], _val = [];
        for(var i in init){
            var rs = init[i];
            if(rs[0] != '' && rs[1] != ''){
                _txt.push(rs[1]);
                _val.push(rs[0]);
            }
        }

        // 赋值
        GI('J_forCity').innerHTML = _txt.join(' / ');
        GC('#J_valCity').value = _val.join('|') + ',' + _txt.join('|');

        // 防止穿透
        event.preventDefault();
    }

    /* ----------------------------- */

    $(function(){

        //
        var zon = 'z-on';
        $('#J_setDft').on('touchend', function(evt){

            var _this = $(this);
            if(_this.hasClass(zon)){
                _this.removeClass(zon);
            }else{
                _this.addClass(zon);
            }

            evt.preventDefault();
            return false;
        });

    });
    function submit()
    {
        var name = $('#J_name').val();
        var isdefault = 0;
        var district = $('#J_valCity').val();
        var address = $('#J_detail').val();
        var mobile = $('#J_mobile').val();
        var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
        if (!reg.test(mobile)) {
            msgPopup("手机号码有误");
            return false;
        }
        if(name == ''){
            msgPopup('请输入收货人姓名');
            return !1;
        }
        if(address == ''){
            msgPopup('请输入详细地址');
            return !1;
        }
        if($('#J_setDft').hasClass('z-on')){
            isdefault = 1;
        }
        $.get("<?=\yii\helpers\Url::to(['update'])?>", {default:isdefault, name:name, district:district, address:address, mobile:mobile, id:<?= $data['id']?>}, function(data) {
            if(data == 1) {
                window.location.href = '/web/address';
            }else {
                msgPopup(data);
            }
        })
    }

    function remove()
    {
        $.post("<?=\yii\helpers\Url::to(['remove'])?>", {id:<?= $data['id']?>}, function(data) {
            if(data == 1) {
                msgPopup('删除成功');
                window.location.href = '/web/address';
            }else {
                msgPopup(data);
            }
        })
    }

</script>

</body>
</html>